<template>
  <div class="hello" style="width: 100%; height: 100%">
    <div style="height: 50px; background: green">
      <button @click="handleJump">跳转到客服</button>
      <button @click="go">video</button>
    </div>
    <div style="height: calc(100% - 50px); display: flex; justify-content: space-between">
      <div style="width: 200px; background: red;">
      </div>
      <div style="flex-grow: 1">
        <drag-rules :data="drag.data" width="600px"></drag-rules>
      </div>
    </div>
  </div>
</template>

<script>
import DragRules from "@/components/DragRules";
export default {
  name: 'HelloWorld',
  data() {
    return {
      id: null,
      drag: {
        data: [
          { label: '福利月基准基数', type: 1, code: 1 },
          { label: '总薪资（total）', type: 1, code: 2 },
          { label: '基本薪水', type: 1, code: 3 },
          { label: '基本工作天数', type: 1, code: 4 },
          { label: '实际工作天数', type: 1, code: 5 },
          { label: '排休日天数', type: 1, code: 6 },
          { label: '底薪', type: 1, code: 7 },
          { label: '工龄工资', type: 1, code: 8 },
          { label: '实际补助天数', type: 1, code: 9 },
          { label: '实际发放总金额', type: 1, code: 10 },
          { label: '汇率补助率', type: 1, code: 11 },
          { label: '+', type: 2, code: 1 },
          { label: '-', type: 2, code: 2 },
          { label: '×', type: 2, code: 3 },
          { label: '÷', type: 2, code: 4 },
          { label: '(', type: 3, code: 1 },
          { label: ')', type: 3, code: 2 },
          { label: '1.5', type: 4, code: 1 },
          { label: '2', type: 4, code: 2 },
          { label: '2.5', type: 4, code: 3 },
          { label: '3', type: 4, code: 4 },
          { label: '3.5', type: 4, code: 5 },
          { label: '4', type: 4, code: 6 },
          { label: '7.3', type: 4, code: 7 },
        ]
      }
    }
  },
  props: {
    msg: String
  },
  methods: {
    go() {

    },
    handleJump() {
      let url = 'https://192.168.1.104:8082/#/loading?userUid=20154121&accessToken=646844f737334304987b47b372094fa4'
      window.location.href = url
    },
    parseStr(url, key) {
      const query = url.split('?')[1];
      let obj = {};
      if (query) {
        const parms = query.split('&');
        for (let i = 0; i < parms.length; i++) {
          const name = parms[i].split('=')[0];
          obj[name] = parms[i].split('=')[1];
        }
        if (key) {
          if (Object.hasOwnProperty.call(obj, key)) {
            return obj[key];
          }
        } else {
          return obj
        }
      }
      return false;
    }
  },
  components: {
    DragRules
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
